<template>
    <view>
        <uni-swipe-action>
            <uni-swipe-action-item :show="show" :disabled="disabled" :autoClose="autoClose" :threshold="threshold"
                :right-options="currentRightOptions" :left-options="currentLeftOptions" @click="handleClick"
                @change="handleChange">
                <view class="py-swipe-action-text">
                    <view style="display: flex; justify-content: space-between; align-items: center;">
                        <view style="display: flex;">
                            <slot></slot>
                            <view class="py-swipe-action-sub-title" v-if="subTitle">
                                <view>
                                    {{subTitle}}
                                </view>
                            </view>
                        </view>
                        <view :class="thirdTitle ? 'py-swipe-action-tag' : ''" v-if="tagText">
                            <u-tag :text="tagText" :type="tagType" plain></u-tag>
                        </view>
                    </view>
                    <view class="py-swipe-action-third-title" v-if="thirdTitle">
                        {{thirdTitle}}
                    </view>

                </view>
            </uni-swipe-action-item>
        </uni-swipe-action>
    </view>
</template>
<script>
    export default {
        name: "PySwipeAction",
        props: {
            // 新增属性开始
            // 子标题
            subTitle: {
                type: String,
                default: undefined
            },

            // 三级标题
            thirdTitle: {
                type: String,
                default: undefined
            },

            // 标签显示值
            tagText: {
                type: String,
                default: undefined
            },

            // 标签类型
            tagType: {
                type: String,
                default: "primary"
            },
            // 新增属性结束

            // uni-swipe-action-item自带属性开始
            // 事件支持click和change
            // 控制开关
            show: {
                type: String,
                default: 'none'
            },

            // 禁用
            disabled: {
                type: Boolean,
                default: false
            },

            // 是否自动关闭
            autoClose: {
                type: Boolean,
                default: true
            },

            // 滑动缺省距离
            threshold: {
                type: Number,
                default: 20
            },

            // 左侧按钮内容
            leftOptions: {
                type: Array,
                default() {
                    return []
                }
            },

            // 右侧按钮内容
            rightOptions: {
                type: Array,
                default() {
                    return []
                }
            }

        },
        data() {
            return {
                // 当前左侧按钮内容
                currentLeftOptions: this.leftOptions,

                // 当前右侧按钮内容
                currentRightOptions: this.rightOptions
            }
        },
        methods: {

            // 处理点击操作
            handleClick(e) {
                this.$emit("click", e);
            },

            // 处理改变事件
            handleChange(e) {
                this.$emit("change", e);
            }
        },

    }
</script>
<style lang="css" scoped>
    .py-swipe-action-text {
        font-size: 15px;
        line-height: 24px;
        padding: 10px 15px;
    }

    .py-swipe-action-sub-title {
        display: flex;
        font-size: 12px;
        color: #2b85e4;
        margin-top: -5px;
        margin-left: 5px;
    }

    .py-swipe-action-third-title {
        font-size: 10px;
        line-height: 10px;
    }

    .py-swipe-action-tag {
        margin-top: 10px;
    }
</style>